/*
 * README
 * - Use plain CSS to create docs component styles
 *   - Component CSS must use "@layer components" to work correctly with Tailwind
 *   - Use component name as the prefix to avoid conflicts, e.g. ".SelectTriggerIcon"
 *   - Prefix CSS variables with component name too, e.g. "--root-layout-padding-x"
 * - Use Tailwind for layout utils
 * - There are two reset layers:
 *   - "@layer all" is a truly global reset (includes all demos)
 *   - "@layer base" is Tailwind’s reset that is reverted in non-Tailwind demos
 *   - We rely on both to build the docs docs
 * - Docs and demos are built using the same theme
 *   - Theme tokens use Tailwind v4 "@theme" naming convention
 *   - Don't use our custom tokens in the demos – only what's available in the default theme.
 */

@layer all;
@layer base;
@layer theme;
@layer components;
@layer utilities;

@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/utilities' layer(utilities);

@import './breakpoints.css';
@import './fonts/index.css';
@import './syntax-highlighting/index.css';
@import './components/Code.css';
@import './components/CodeBlock.css';
@import './components/Demo/Demo.css';
@import './components/GhostButton.css';
@import './components/Header.css';
@import './components/HeadingLink.css';
@import './components/Kbd/Kbd.css';
@import './components/Link.css';
@import './components/MobileNav.css';
@import './components/Popup.css';
@import './components/QuickNav/QuickNav.css';
@import './components/ScrollArea.css';
@import './components/Select.css';
@import './components/SideNav.css';
@import './components/SkipNav.css';
@import './components/Subtitle/Subtitle.css';
@import './components/Subtitle/MarkdownLink.css';
@import './components/Table.css';

@import './components/Accordion.css';
@import './components/DescriptionList.css';

/* Handy link to the default Tailwind theme:
/* https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/theme.css */

/* We defined grays, red, and blue in the theme used for demos. */
/* Uses gray scale that is roughly compatible with Tailwind's grays */
@import './demo-data/theme/css-modules/theme.css' layer(theme);

@theme {
  --color-*: initial;
  --color-white: white;
  --color-black: black;

  /* Gray colors defined in file://./demo-data/theme/css-modules/theme.css */
  --color-gray-50: inherit;
  --color-gray-75: oklch(97% 0.325% 264deg); /* Not a Tailwind step, don't use it in the demos */
  --color-gray-100: inherit;
  --color-gray-200: inherit;
  --color-gray-300: inherit;
  --color-gray-400: inherit;
  --color-gray-500: inherit;
  --color-gray-600: inherit;
  --color-gray-700: inherit;
  --color-gray-800: inherit;
  --color-gray-900: inherit;
  --color-gray-950: inherit;

  /* Other colors used in Tailwind demos */
  --color-blue-800: var(--color-blue);
  --color-red-800: var(--color-red);

  /* Functional colors for the docs */
  --color-content: white;
  --color-background: var(--color-gray-50);
  --color-foreground: var(--color-gray-900);
  --color-popup: white;
  --color-gridline: oklch(91.6% 1% 264deg);
  --color-selection: oklch(80% 50% 264deg / 25%);
  --color-highlight: var(--color-blue);
  --color-line-highlight: oklch(80% 50% 264deg / 10%);
  --color-line-highlight-strong: oklch(80% 50% 264deg / 25%);
  --color-inline-highlight: oklch(80% 50% 264deg / 15%);

  /* Text colors for the docs */
  /* Color Red and Blue defined in file://./demo-data/theme/css-modules/theme.css */
  --color-blue: inherit;
  --color-red: inherit;
  --color-gray: var(--color-gray-600);
  --color-navy: oklch(31% 25% 264deg);
  --color-green: oklch(46% 30% 150deg);
  --color-purple: oklch(40% 45% 360deg);
  --color-violet: oklch(40% 60% 300deg);

  /* Typography */
  --font-mono: 'SF Mono', 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Inconsolata', monospace;
  --font-sans: 'Unica 77', system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-xs--line-height: 1.25rem;
  --text-xs--letter-spacing: 0.001em;

  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-sm--letter-spacing: 0.016em;

  --text-md: 0.9375rem;
  --text-md--line-height: 1.375rem;
  --text-md--letter-spacing: 0.016em;

  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-base--letter-spacing: 0em;

  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --text-lg--letter-spacing: -0.0025em;

  --text-xl: 1.3125rem;
  --text-xl--line-height: 1.625rem;
  --text-xl--letter-spacing: -0.005em;

  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.25;
  --text-2xl--letter-spacing: -0.0125em;

  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-3xl--letter-spacing: -0.015em;

  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.5rem;
  --text-4xl--letter-spacing: -0.015em;

  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-5xl--letter-spacing: -0.015em;

  --text-6xl: 3.75rem;
  --text-6xl--line-height: 0.95;
  --text-6xl--letter-spacing: -0.015em;

  --ease-out-fast: cubic-bezier(0.45, 1.005, 0, 1.005);
  --ease-in-slow: cubic-bezier(0.375, 0.015, 0.545, 0.455);
  --header-height: 3rem;
}

:root {
  @media (prefers-color-scheme: dark) {
    /* Gray colors defined in file://./demo-data/theme/css-modules/theme.css */
    --color-gray-75: oklch(19% 0.5% 264deg); /* Not a Tailwind step, don't use it in the demos */

    /* Functional colors */
    --color-content: black;
    --color-background: black;
    --color-foreground: oklch(90% 2% 264deg);
    --color-popup: var(--color-gray-50);
    --color-gridline: oklch(24% 1% 264deg);
    --color-highlight: oklch(45% 40% 264deg);
    --color-selection: oklch(50% 50% 264deg / 40%);
    --color-line-highlight: oklch(50% 50% 264deg / 20%);
    --color-line-highlight-strong: oklch(50% 50% 264deg / 35%);
    --color-inline-highlight: oklch(50% 50% 264deg / 35%);

    /* Text colors */
    /* Color Red and Blue defined in file://./demo-data/theme/css-modules/theme.css */
    --color-gray: var(--color-gray-600);
    --color-green: oklch(75% 25% 150deg);
    --color-navy: oklch(85% 25% 264deg);
    --color-purple: oklch(85% 30% 360deg);
    --color-violet: oklch(80% 60% 280deg);
  }
}

/* Disable docs-specific variables in the demos. Keep this in sync with the "@theme" block above */
@layer theme {
  [data-demo] {
    --text-md: initial;
    --text-md--line-height: initial;
    --text-md--letter-spacing: initial;

    --color-gray: initial;
    --color-navy: initial;
    --color-green: initial;
    --color-purple: initial;
    --color-violet: initial;
    --color-content: initial;
    --color-background: initial;
    --color-foreground: initial;
    --color-popup: initial;
    --color-gridline: initial;
    --color-highlight: initial;
    --color-gray-75: initial;
    --ease-out-fast: initial;
    --ease-in-slow: initial;
    --header-height: initial;

    /* These variables are available in the default Tailwind theme */
    &:not([data-demo='tailwind']) {
      --color-white: initial;
      --color-black: initial;
    }
    /* These variables are exposed in "demo-theme.css" for CSS Modules demos */
    &:not([data-demo='css-modules']) {
      --color-blue: initial;
      --color-red: initial;
    }
  }
}

/* Remove the Tailwind reset in non-Tailwind demos */
@layer base {
  [data-demo]:not([data-demo='tailwind']) * {
    all: revert-layer;
  }

  [data-demo='tailwind'] {
    --text-sm--letter-spacing: 0em;
    --text-md--letter-spacing: 0em;
  }
}

@layer all {
  html {
    /* Stable scrollbar */
    overflow-y: scroll;
    word-break: break-word;
  }

  body {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Debugging red text? You just forgot to set or inherit color in your demo. */
  :where([data-demo]) {
    color: red;
  }
  /* Controls usually have #000 text that needs to be explicitly overridden; only Tailwind reset handles it */
  :where([data-demo]:not([data-demo='tailwind'])) :where(button, input, textarea) {
    color: red;
  }
}
